import React, { useState } from 'react'
import LoginStyle from './login.module.css'
import { Button, Form, Input, message } from 'antd';
import axios from 'axios'


export default function Home (props) {
  console.log(props);
  // function组件定义数据的方式
  const [isDisabled, setIsDisabled] = useState(true)  // 定义数据

  const onFinish = (values) => {
    axios.post('/api/managerLogin',values).then(data => {
      message.success(data.data.msg, ()=>{
        if (data.data.code === 200) {
          localStorage.setItem('adminId', data.data.adminId)
          props.history.push('/index')
        }
      });
    })
  };
  const changeForm = (changedValues, allValues)=>{
    if (allValues.username && allValues.password) {
      setIsDisabled(false)
    }
  }
  return (
      <div className='flex h100'>
        {/* 左侧 */}
        <div className={`h100 ${LoginStyle.banner}`}></div>
        {/* 右侧 */}
        <div className={`flex1 h100 p20 ${LoginStyle.right}`}>
          <div className='flex flex-align-center'>
            <img src={require('./../../assets/logo-mi2.png')} width="40" alt=""/>
            <h2 className='mb0 ml15'>小米商城-后台管理系统</h2>
          </div>
          <div className={`mt60 m-auto ${LoginStyle.login}`}>
            <h3 className={LoginStyle.loginText}>
              <span>登录</span>
            </h3>
            <Form
              name="normal_login"
              className="login-form"
              
              onValuesChange={changeForm}
              onFinish={onFinish}
            >
              <Form.Item
                name="username"
                rules={[
                  {
                    required: true,
                    message: '请输入用户名!',
                  },
                ]}
                className={`${LoginStyle.item}`}
              >
                <Input className={`${LoginStyle.user}`}  placeholder="管理员账号" />
              </Form.Item>
              <Form.Item
                name="password"
                rules={[
                  {
                    required: true,
                    message: '请输入密码!',
                  },
                ]}
                className={`${LoginStyle.item}`}
              >
                <Input
                  type="password"
                  className={`${LoginStyle.user}`}
                  placeholder="密码"
                />
              </Form.Item>
           

              <Form.Item className={`${LoginStyle.item}`}>
                <Button type="primary" htmlType="submit" className={`${LoginStyle.button} ${isDisabled ? LoginStyle.disabled : ''}`} block={true}>
                  登录
                </Button>
              </Form.Item>
            </Form>
          </div>
        </div>
      </div>
    )
}
